<!doctype html>
<html class="no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>果缘</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="icon" type="image/png" href="assets/i/favicon.png">
	<link rel="stylesheet" href="assets/css/amazeui.css">
	<link rel="stylesheet" href="assets/css/app.css">
	<link rel="stylesheet" href="assets/css/custom.css">
	<style>
			#content .item h2 {
			    color: #2FC079;
				border-bottom: 1px solid #2FC079;
			}
			#content h4 {
			    color: #F40000;
			    font-size: 18px;
				border-top: 1px solid #F40000;
				display: block;
				margin-bottom: 10px;
				text-align: right;
			}
			#content h5 {
			    color: #2FC079;
			    font-size: 16px;
				border-top: 1px solid #2FC079;
				display: block;
				margin-bottom: 10px;
				text-align: right;
			}
			#content .item s {
			    color: #F40000;
			    font-size: 11px;
			}
			.fruit_green{
			    color: #2FC079;
			}
			.fruit_red_tip {
			    color: #F40000;
			    font-size: 11px;
			    display: inline-block;
			    position: absolute;
			    top: 0;
			    right: 0;
			}
</style>

</head>
<body>
	<!-- Header -->
	<header data-am-widget="header" class="am-header am-header-default  am-header-fixed">
		<h1 class="am-header-title">
			<a href="#title-link" class="">购物车</a>
		</h1>
		<div class="am-header-left am-header-nav">
			<a href="#left-link" class=""> <i class="am-header-icon am-icon-chevron-left"></i>
			</a>
		</div>
		<div class="am-header-right am-header-nav">
			<a href="#right-link" class=""> <i class="am-header-icon am-icon-search"></i>
			</a>
		</div>
	</header>
	<!--ProductList-->
	<div id="content" data-am-widget="list_news" class="am-list-news am-list-news-default">
		<div id="item1" class="item">
			<!--list title-->
			<h2>a store</h2>
			<!--list content-->
			<ul class="am-list">
				<!--缩略图在标题左边-->
				<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
					<div class="am-u-sm-4 am-list-thumb">
						<a href="#">
							<img src="assets/i/examples/fruits/fruit1.jpeg" alt="" />
						</a>
					</div>
					<div class="am-u-sm-8 am-list-main">
						<h3 class="am-list-item-hd">
							<a href="#">商品名称</a>
						</h3>
						
						<div class="am-list-item-text">商品简介</div>
						<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
						<span class="fruit_red_tip">销量：100000</span>
						<div class="am-vertical-align-bottom am-fr">
							<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
							<span class="fruit_green">1</span>
							<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
						</div>
					</div>
				</li>
				<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
					<div class="am-u-sm-4 am-list-thumb">
						<a href="###">
							<img src="assets/i/examples/fruits/fruit3.jpg" alt="商店图片" />
						</a>
					</div>
					<div class="am-u-sm-8 am-list-main">
						<h3 class="am-list-item-hd">
							<a href="#">商品名称</a>
						</h3>
						
						<div class="am-list-item-text">商品简介</div>
						<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
						<span class="fruit_red_tip">销量：100000</span>
						<div class="am-vertical-align-bottom am-fr">
							<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
							<span class="fruit_green">1</span>
							<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
						</div>
					</div>
				</li>
				<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
					<div class="am-u-sm-4 am-list-thumb">
						<a href="###">
							<img src="assets/i/examples/fruits/fruit2.jpg" alt="商店图片" />
						</a>
					</div>
					<div class="am-u-sm-8 am-list-main">
						<h3 class="am-list-item-hd">
							<a href="#">商品名称</a>
						</h3>
						
						<div class="am-list-item-text">商品简介</div>
						<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
						<span class="fruit_red_tip">销量：100000</span>
						<div class="am-vertical-align-bottom am-fr">
							<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
							<span class="fruit_green">1</span>
							<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
						</div>
					</div>
				</li>
			</ul>
			<h5>总计：￥40</h5>
		</div>
		<div id="item2" class="item">
			<!--list title-->
			<h2>b store</h2>
			<!--list content-->
			<ul class="am-list">
				<!--缩略图在标题左边-->
				<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
					<div class="am-u-sm-4 am-list-thumb">
						<a href="#">
							<img src="assets/i/examples/fruits/fruit1.jpeg" alt="我很囧，你保重....晒晒旅行中的那些囧！" />
						</a>
					</div>
					<div class="am-u-sm-8 am-list-main">
						<h3 class="am-list-item-hd">
							<a href="#">商品名称</a>
						</h3>
						
						<div class="am-list-item-text">商品简介</div>
						<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
						<span class="fruit_red_tip">销量：100000</span>
						<div class="am-vertical-align-bottom am-fr">
							<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
							<span class="fruit_green">1</span>
							<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
						</div>
					</div>
				</li>
				<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
					<div class="am-u-sm-4 am-list-thumb">
						<a href="###">
							<img src="assets/i/examples/fruits/fruit3.jpg" alt="商店图片" />
						</a>
					</div>
					<div class="am-u-sm-8 am-list-main">
						<h3 class="am-list-item-hd">
							<a href="#">商品名称</a>
						</h3>
						
						<div class="am-list-item-text">商品简介</div>
						<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
						<span class="fruit_red_tip">销量：100000</span>
						<div class="am-vertical-align-bottom am-fr">
							<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
							<span class="fruit_green">1</span>
							<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
						</div>
					</div>
				</li>
				<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
					<div class="am-u-sm-4 am-list-thumb">
						<a href="###">
							<img src="assets/i/examples/fruits/fruit2.jpg" alt="商店图片" />
						</a>
					</div>
					<div class="am-u-sm-8 am-list-main">
						<h3 class="am-list-item-hd">
							<a href="#">商品名称</a>
						</h3>
						
						<div class="am-list-item-text">商品简介</div>
						<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
						<span class="fruit_red_tip">销量：100000</span>
						<div class="am-vertical-align-bottom am-fr">
							<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
							<span class="fruit_green">1</span>
							<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
						</div>
					</div>
				</li>
			</ul>
			<h5>总计：￥50</h5>
		</div>
		<h4 class="total-price">合计：￥100</h4>
	</div>
	<!--OrderForm-->
	<form action="" class="am-form" data-am-validator>
		<fieldset>
			<legend>订单信息</legend>
			<div class="am-dropdown" data-am-dropdown>
  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>选择收获地址 <span class="am-icon-caret-down"></span></button>
  <ul class="am-dropdown-content">
    <li><a href="#">深圳长城开发科技股份有限公司</a></li>
    <li class="am-active"><a href="#">中心公园北门</a></li>
    <li><a href="#">深圳图书馆</a></li>
  </ul>
</div>
			<div class="am-form-group">
				<label for="doc-vld-name">收货人姓名：</label>
				<input type="text" id="doc-vld-name" minlength="2" placeholder="输入姓名（至少 2 个字符）" required/>
			</div>
			<div class="am-form-group">
				<label for="doc-vld-address">收货地址：</label>
				<input type="text" id="doc-vld-address" placeholder="输入收货地址" required/>
			</div>
			<div class="am-form-group">
				<label for="doc-vld-tel">手机号码</label>
				<input type="number" id="doc-vld-tel" placeholder="输入手机号码" min="10000000000" max="19999999999" required />
			</div>
			<div class="am-form-group">
				<label for="doc-vld-payway">支付方式：</label>
				<div class="am-btn-group doc-js-btn-1" data-am-button>
					<div class="am-btn am-btn-primary">
						<input type="radio" name="options" value="货到付款" id="option1">货到付款</div>
					<div class="am-btn am-btn-primary">
						<input type="radio" name="options" value="在线支付" id="option2">在线支付</div>
				</div>
			</div>

			<div class="am-form-group">
				<label for="doc-vld-remark">备注：</label>
				<textarea id="doc-vld-remark" placeholder="至多输入128个字符" maxlength="128"></textarea>
			</div>

			<button type="button" class="am-btn am-btn-primary am-btn-block">提交订单</button>
		</fieldset>
	</form>
	<!--Footer -->
	<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default" id="">
		<ul class="am-navbar-nav am-cf am-avg-sm-4">
			<li>
				<a href="index.html">
					<span class="am-icon-home"></span>
					<span class="am-navbar-label">首页</span>
				</a>
			</li>
			<li>
				<a href="shopcart.html">
					<span class="am-icon-shopping-cart"></span>
					<span class="am-navbar-label">购物车</span>
				</a>
			</li>
			<li>
				<a href="person-center.html">
					<span class="am-icon-user"></span>
					<span class="am-navbar-label">个人中心</span>
				</a>
			</li>
			<li>
				<a href="message.html">
					<span class="am-icon-comment"></span>
					<span class="am-navbar-label">消息</span>
				</a>
			</li>
		</ul>
	</div>
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/amazeui.min.js"></script>
</body>
</html>